<!DOCTYPE html>

<html class="no-js css-menubar" lang="zh-cn">

<head>
  <title>管理员列表</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 移动设备 viewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

  <!-- 样式 -->
  <link rel="stylesheet" href="../public/themes/classic/global/css/bootstrap.css">
  <link rel="stylesheet" href="../public/fonts/font-awesome/font-awesome.css">
  <link rel="stylesheet" href="../public/fonts/web-icons/web-icons.css">
  <link rel="stylesheet" href="../public/themes/classic/base/css/site.css" id="admui-siteStyle">
  <link rel="stylesheet" href="../public/vendor/dataTables-bootstrap/dataTables.bootstrap.css">
  <link rel="stylesheet" href="../public/vendor/datatables-responsive/dataTables.responsive.css" />

  <script src="../public/vendor/jquery/jquery.min.js"></script>
  <script src="../js/common.js"></script>
  <script src="../public/vendor/vue/vue.min.js"></script>
  <script src="../public/vendor/bootstrap/bootstrap.min.js"></script>
  <!--layer弹窗-->
  <script src="../public/vendor/layer/layer.js"></script>
</head>

<body class="layout-full">
<div class="page animation-fade page-blank" id="app">
  <div class="page-content">
    <div class="panel">
      <div class="panel-heading">
      </div>
      <div class="panel-body padding-top-10">
        <div class="col-xs-12">
          <form class="form-inline pull-right" id="search-form">
            <div class="form-group">
              <input class="form-control input-sm" id="userName" name="userName" placeholder="姓名" autocomplete="off" type="text">
              <input class="form-control input-sm" id="idNumber" name="idNumber" placeholder="身份证号码" autocomplete="off" type="text">
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-primary btn-sm" onclick="search(true)"><i class="fa fa-search" aria-hidden="true"></i> 搜索</button>
              <button type="reset" class="btn btn-primary btn-sm" >重置</button>

            </div>
            <div class="form-group">
              <button type="button"  class="btn btn-icon btn-primary btn-sm" onclick="layer_show('编辑', 'source_user_edit.html', '650', '500', true)">
                <i class="fa fa-pencil" aria-hidden="true"></i> 编辑
              </button>
              <button type="button" class="btn btn-icon btn-primary btn-sm" onclick="downTemplate()">
                下载模板
              </button>
              <button type="button" class="btn btn-icon btn-primary btn-sm" data-target="#importExcel" data-toggle="modal">
                导入名单
              </button>
            </div>
          </form>
        </div>
        <div class="col-xs-12">
          <table class="table table-bordered table-hover dataTable table-striped width-full" id="dataTable">
            <thead>
            <tr>
              <th></th>
              <th>ID</th>
              <th>姓名</th>
              <th>身份证号码</th>
            </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade modal-3d-flip-vertical" id="importExcel" aria-hidden="true" aria-labelledby="exampleModalTitle"
       role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
            <span aria-hidden="true">×</span>
          </button>
          <h4 class="modal-title">导入用户</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="excelForm">
            <div class="form-group">
              <label class="col-sm-4 col-xs-4 text-right control-label">上传excel表格：</label>
              <div class="col-sm-8 col-xs-8">
                <div class="input-group input-group-file">
										<span class="input-group-btn">
											<span class="btn btn-success btn-file" style="width:100%">
												{{uoloadText}}
												<input id="excel" type="file" name="file">
											</span>
										</span>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" @click="uploadExcel">保存</button>
          <button type="button" class="btn btn-default m-0" data-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>

</div>

<script src="../public/vendor/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../public/vendor/dataTables/jquery.dataTables.js"></script>
<script src="../public/vendor/dataTables/dataTables.bootstrap.js"></script>
<script src="../public/vendor/dataTables-responsive/dataTables.responsive.min.js"></script>
<script src="../public/themes/classic/base/js/app.js"></script>
<!--laydate日期-->
<script src="../public/vendor/laydate/laydate.js"></script>
<!-- jQuery上传插件 -->
<script src="../public/vendor/ajaxfileupload/ajaxfileupload.js"></script>

<!--{表格必须组件}初始化表格，请放在最后引用-->
<script src="../js/table.js"></script>
<script>
		var vm = new Vue({
			el: '#app',
			data: {
				search: {

				},
				uoloadText: '请选择文件' // excel上传按钮显示的文字
			},
			methods: {
				/**
				 * 重置搜索栏
				 * @returns
				 */
				reset: function() {

				},
				initTable() {
					// 表格数据请求地址
					var ajaxUrl = baseURL + 'sys/sourceUser/list';
					// 配置表头
					var arr = [{
								"data": "userName"
							}, {
								"data": "idNumber"
							}
						]
					// 初始化表格
					TABLE.init(ajaxUrl, arr);
				}
			},
			mounted() {
				this.initTable();
			}
		})

		/**
		 * 导入excel
		 * @returns
		 */
		function uploadExcel() {
			var excel = $('#excel').val();
			if (excel === "" || excel.length === 0) {
				layer.msg("请选择要上传的Excel");
				return;
			}
			// 开启loadding
			var i = layer.load();
			vm.uoloadText = excel;
			$.ajaxFileUpload({
				type: "POST",
				url: baseURL + "/user/excel/import",
				data: {
					'token': token,
				}, //要传到后台的参数，没有可以不写
				secureuri: false, //是否启用安全提交，默认为false
				fileElementId: "excel", //文件选择框
				dataType: 'json', //服务器返回的格式
				async: false,
				success: function(data) {
					layer.close(i);
					if (data.code === 0) {
						layer.msg('上传成功！');
						$("#importExcel").modal('hide');
						search(false);
					} else {
						layer.alert(data.msg);
					}
				},
				error: function(data, status, e) {
					layer.close(i);
					layer.msg('上传失败！');
				}
			});
		}

		$('#excelForm').on("change", "#excel", function(e) {

			var excel = $('#excel').val();
			vm.uoloadText = excel;
		});

		function downTemplate() {
			window.open(baseURL + "template/source_user.xls?token=" + token);
		}

	</script>

</body>

</html>